<template>
  <div class="mc-input-container">
    <textarea
      class="mc-input"
      :value="value"
      :maxlength="maxLength"
      @input="handleInput"
      @keydown.enter.prevent="$emit('submit', value)"
      placeholder="请输入消息..."
    ></textarea>
    <div class="mc-input-extra">
      <slot name="extra"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  value: {
    type: String,
    default: '',
  },
  maxLength: {
    type: Number,
    default: 2000,
  },
});

const emit = defineEmits(['change', 'submit']);

const handleInput = (event: Event) => {
  const target = event.target as HTMLTextAreaElement;
  emit('change', target.value);
};
</script>

<style scoped>
.mc-input-container {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--devui-form-control-line, #dfe1e6);
  border-radius: 4px;
  background-color: var(--devui-base-bg, #ffffff);
}

.mc-input {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  border: none;
  resize: none;
  outline: none;
  font-size: 14px;
  color: var(--devui-text, #252b3a);
  background-color: transparent;
}

.mc-input-extra {
  padding: 8px 12px;
  border-top: 1px solid var(--devui-form-control-line, #dfe1e6);
}
</style> 